<template>
	<div>
		<div class="displayFlex">
			<div v-for="item in 8" :class="(params.year == year - item +1)?'selected':'itemClass'"
				style="line-height: 44px;" class="textCenter ml10 color888 point" @click="chooseYear(year - item +1)">
				{{year - item +1}}
			</div>
			<div style="line-height: 44px;" class="textCenter ml10 color888">更多</div>
		</div>

		<div style="display: flex;justify-content: space-between;width: 100%;" class="mt10">
			<div class="bgfff pad10 bra4 mr20" style="flex: 1;">
				<div class="font15 color555 mb10">月报</div>
				<div style="display: flex;flex-wrap: wrap;">
					<div v-for="(item,index) in dataList.month" :key="index"
						class="color333 font16 displayFlexBet mb10 point"
						style="border-radius: 8px;border: 1px solid #E8E8F5;width: calc(50% - 10px);padding:30px;"
						:class="[index%2==0?'mr10':'']" @click="gotoPage(item,'MONTH')">
						<div>{{item.dateStr}}</div>
						<div v-if="item.submitFlag">已制作</div>
					</div>
				</div>
			</div>
			<div style="flex: 1;">
				<div class="bgfff pad10 bra4" style="flex: 1;">
					<div class="font15 color555 mb10">季报</div>
					<div style="display: flex;flex-wrap: wrap;">
						<div v-for="(item,index) in dataList.quarter" :key="index"
							class="color333 font16 displayFlexBet mb10 point"
							style="border-radius: 8px;border: 1px solid #E8E8F5;width: calc(50% - 10px);padding:30px;"
							:class="[index%2==0?'mr10':'']" @click="gotoPage(item,'QUARTER')">
							<div>{{item.dateStr}}</div>
							<div v-if="item.submitFlag">已制作</div>
						</div>
					</div>
				</div>

				<div class="bgfff pad10 bra4 mt20" style="flex: 1;">
					<div class="font15 color555 mb10">年度</div>
					<div style="display: flex;flex-wrap: wrap;">
						<div v-for="(item,index) in dataList.year" :key="index"
							class="color333 font16 displayFlexBet mb10 point"
							style="border-radius: 8px;border: 1px solid #E8E8F5;width: calc(50% - 10px);padding:30px;"
							:class="[index%2==0?'mr10':'']" @click="gotoPage(item,'YEAR')">
							<div>{{item.dateStr}}</div>
							<div v-if="item.submitFlag">已制作</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let that
	export default {
		data() {
			return {
				year: new Date().getFullYear(),
				params: {
					year: ''
				},
				dataList: {}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.year = that.year
			that.getUserLicenceStatus()
		},

		methods: {
			gotoPage(item, dataType) {
				that.$router.push('/executiveReportDet?dataType=' + dataType + "&startTime=" + item.startTime.split(" ")[0] +
					"&endTime=" + item.endTime.split(" ")[0])
			},

			chooseYear(year) {
				that.params.year = year
				that.getUserLicenceStatus()
			},

			//获取激活状态
			getUserLicenceStatus() {
				that.ajax({
					url: 'executeReport/getExecuteReports',
					data: {
						year: that.params.year
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (res) => {
						if (res.data) {
							that.dataList = res.data
						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		background: #3A3EF4;
		border-radius: 8px;
		color: #fff;
		width: 120px;
	}

	.itemClass {
		width: 80px;
	}
</style>